<meta charset="UTF-8">

<style>
    * {
        padding: 0;
        margin: 0
    }

    body {
        background-color: black;
    }
</style>

<body>
    <div class="healthLine" style="width:100px;height:50px;background:green">
        <div class="health" style="width:100px;height:50px;background:red"></div>
    </div>
    <div class="score" style="width:100px;height:50px;background:#fff"></div>
</body>

<script>

    setInterval(function () {
        var imgObj = document.createElement('img')
        imgObj.src = './star.gif'
        var min = 20
        var max = 40
        var temp = Math.floor(Math.random() * (max - min + 1) + min)
        imgObj.width = temp
        var leftMin = 0
        var leftMax = (window.innerWidth || document.documentElement.clientWidth) - temp
        var left = Math.floor(Math.random() * (leftMax - leftMin + 1) + leftMin)
        var topMin = 0
        var topMax = (window.innerHeight || document.documentElement.clientHeight) - temp
        var top = Math.floor(Math.random() * (topMax - topMin + 1) + topMin)
        imgObj.style.position = 'absolute'
        imgObj.style.left = left + 'px'
        imgObj.style.top = top + 'px'
        document.body.appendChild(imgObj)
        scoreObj.innerText = score + '分'
        scoreObj.style.lineHeight = '50px'
        scoreObj.style.textAlign = 'center'
    }, 1000)

    document.body.onclick = function (evt) {
        var e = evt || window.event
        var target = e.target || e.srcElement
        if (target.nodeName === 'IMG') {
            document.body.removeChild(target)
            var health = parseInt(document.querySelector('.health').style.width)
            if (health + 1 !== 100) {
                document.querySelector('.health').style.width = health + 1 + 'px'
                score++
            }
        }
    }
    var score = 0
    var scoreObj = document.querySelector('.score')
    setInterval(function () {
        var health = parseInt(document.querySelector('.health').style.width)
        document.querySelector('.health').style.width = health - 1 + 'px'
    }, 1000)
</script>